<template>
    <div class="addProd">
        <div class="box flex-b">
            <div class="left">
                <div class="prod-title">
                    <div class="flex-a">
                        <div class="basic">{{ form.id?'编辑':'新增' }}店员</div>
                    </div>
                </div>
                <div class="prod-content" style="padding-left: 10px;">
                    <el-form ref="form" :model="form" class="input">
                        <!-- <div>
                            <p>店员头像</p>
                            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-upload avatar-uploader-icon"></i>
                            </el-upload>
                        </div> -->
                        <div>
                            <p>店员姓名</p>
                            <el-input v-model="form.staffName" class="input" placeholder="请输入店员姓名" clearable></el-input>
                        </div>
                        <div>
                            <p>店员账号</p>
                            <el-input v-model="form.staffPhone" class="input" placeholder="请输入店员账号"
                                clearable></el-input>
                            <span class="tip">（店员账号为店员的手机号码）</span>
                        </div>
                        <!-- <div>
                            <p>所属店铺</p>
                            <el-select v-model="form.topCate" filterable placeholder="请选择所属店铺" class="input" clearable>
                                <el-option :label="item.name" :value="item.id + ''" v-for="item in classList"
                                    :key="item.id"></el-option>
                            </el-select>
                            <span class="tip">（仅主店可添加其他店铺的店员）</span>
                        </div> -->
                        <div>
                            <p>店员职位</p>
                            <el-select v-model="form.staffRole" filterable placeholder="请选择店员职位" class="input"
                                clearable>
                                <el-option :label="item.name" :value="item.id + ''" v-for="item in roleList"
                                    :key="item.id"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <p>登录密码</p>
                            <el-input v-model="form.staffPwd" @input="inputName" class="input" placeholder="请输入登录密码"
                                clearable></el-input>
                        </div>
                        <!-- <div>
                            <p>可被预约服务</p>
                            <el-radio v-model="form.radio" label="1">是</el-radio>
                            <el-radio v-model="form.radio" label="2">否</el-radio>
                        </div> -->
                        <div>
                            <p>店员状态（锁定后不可登录）</p>
                            <el-radio v-model="form.status" label="1">正常</el-radio>
                            <el-radio v-model="form.status" label="2">离职</el-radio>
                            <el-radio v-model="form.status" label="3">锁定</el-radio>
                        </div>
                    </el-form>
                </div>
                <div style="margin-top: 30px;">
                    <el-button type="warning" style="padding:12px 70px" class="btn" @click="submit">提交</el-button>
                    <el-button type="warning" style="padding:12px 50px" class="btn-plain"
                        @click="back">返回上一页</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getEbstaff, addEbstaff, updateEbstaff, getRole } from "@/api/pet/ebstaff";
export default {
    name: "addProd",
    components: {

    },
    data() {
        return {
            form: {},
            rules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
            },
            loading: false,
            id: '',
            roleList: []
        };
    },
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.getEbstaff(this.$route.query.id)
        }
        this.getRole()//获取店员职位
    },
    mounted() {

    },
    methods: {
        //获取店员职位
        getRole() {
            getRole().then(res => {
                if (res.code == 200) {
                    this.roleList = res.data
                }
            })
        },
        //获取详情
        getEbstaff(id) {
            getEbstaff(id).then(response => {
                this.form = response.data;
            });
        },
        //提交
        submit() {
            if (this.form.id != null) {
                updateEbstaff(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.$router.push({ path: '/store/ebstaff' })
                });
            } else {
                addEbstaff(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.$router.push({ path: '/store/ebstaff' })
                });
            }
        },
        // 返回上一页
        back() {
            this.$router.push({ path: '/store/ebstaff' })
        },
    }
};
</script>
<style scoped lang="scss">
.box {
    position: relative;

    .left {
        width: 100%;
    }

    .prod-title {
        .basic {
            font-size: 18px;
            color: #333336;
            font-weight: 700;
            margin-right: 30px;

            span {
                color: #409eff;
                font-size: 12px;
                font-weight: normal;
                margin: 0 20px 0 5px;
            }
        }
    }

    .prod-content {
        margin-top: 20px;

        div {
            margin-bottom: 15px;

            .mr {
                margin-right: 10px;
            }

            p {
                color: #000000;
                font-size: 14px;

                span {
                    color: #b3b3b3;
                    font-size: 12px;
                }
            }

            .el-input {
                width: 240px;
            }

            .select {
                margin-left: 10px;
                width: 80px;
            }

            .el-textarea {
                width: 500px;
            }

            .el-button.btn {
                margin-left: 10px;
            }

            .tip {
                display: inline-block;
                font-size: 12px;
                color: #333336;
                margin-left: 5px;

                span {
                    color: #409eff;
                }

                span:hover {
                    cursor: pointer;
                }
            }

        }

        .flex {
            p {
                margin-top: 0 !important;
            }
        }

        .suggest {
            span {
                color: rgb(245, 108, 108);
                font-size: 12px;
            }
        }

        .table {
            margin-left: 130px;

            .el-input {
                width: 120px !important;
            }

            .el-textarea {
                width: 150px !important;
            }

            div {
                color: #409eff;
            }

            .switch {
                div {
                    margin: 0;
                }

                span {
                    display: inline-block;
                    font-size: 14px;
                    color: #606266;
                    width: 110px;
                    text-align: left;
                    box-sizing: border-box;
                }
            }
        }
    }
}

.submit-foot {
    position: fixed;
    bottom: 20px;
    background-color: #fff;
    width: 100%;
    height: 60px;
    z-index: 77;
    padding-left: 20px;
    margin-left: -18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 6px 0 6px rgba(0, 0, 0, .12);
    line-height: 60px;
    margin-bottom: -20px;

}
</style>
